<template>
  <!-- 添加明细 -->
  <div>
    <TopFilter :list="topFilterList" :cols="4" :labelWidth="85" :rows="2" :collapse="false" @filterChange="handleSearch"></TopFilter>
    <FilterTable
      :columns="tableColum"
      columnsRef="partPartPurchasePurchasePlanePartSelect"
      height="auto"
      :selectionType="mode"
      :fetchapi="defaultFetchapi"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.tableColum = columns)"
      :onRowSelectChange="handleTableRowSelect"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { queryPartListByOrderType } from '@/api/part/partPurchase/purchaseOrder';

export default {
  props: {
    fetchapi: Function,
    orderType: Number,
    mode: {
      type: String,
      default: 'multiple'
    }
  },
  data() {
    return {
      topFilterList: this.createFilterList(),
      tableColum: this.createTableColumn(),
      defaultFetchapi: () => {},
      fetchParams: { xhrAbort: true },
      selectedRowDatas: []
    };
  },
  created() {
    console.log(this.fetchapi);
    this.initSearch();
  },
  methods: {
    createFilterList() {
      return [
        // {
        //   type: 'INPUT',
        //   label: '主组号'
        // },
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'partNo'
        },
        {
          type: 'INPUT',
          label: '配件名称',
          fieldName: 'partName'
        },
        {
          type: 'INPUT',
          label: '拼音码',
          fieldName: 'spellCode'
        }
        // {
        //   type: 'CHECKBOX',
        //   label: '成套件',
        //   change: e => {}
        // },
        // {
        //   type: 'CHECKBOX',
        //   label: '显示零可用',
        //   change: e => {}
        // }
      ];
    },
    createTableColumn() {
      return [
        {
          title: '配件代码',
          width: 150,
          dataIndex: 'partNo'
        },
        {
          title: '配件名称',
          dataIndex: 'partName',
          showOverflowTooltip: true
        },
        {
          title: '采购单价',
          dataIndex: 'planPrice'
        },
        {
          title: '库存数量',
          dataIndex: 'stockQuantity'
        },
        {
          title: '可用数量',
          dataIndex: 'useableQuantity'
        },
        {
          title: '在途数量',
          dataIndex: 'mock6'
        },
        {
          title: '采购锁',
          dataIndex: 'stockLockMark'
        },
        {
          title: '仅辖区发货',
          dataIndex: 'shipMark'
        },
        {
          title: 'R3仓库代码',
          dataIndex: 'mock9'
        },
        {
          title: 'R3库存数量',
          dataIndex: 'mock10'
        }
        // {
        //   title: '操作',
        //   render: props => {
        //     return <el-button type="text">查看R3库存</el-button>;
        //   }
        // }
      ];
    },
    handleCheckBox(e) {
      console.log(e);
    },
    // 初始化查询
    initSearch() {
      this.defaultFetchapi = this.fetchapi || queryPartListByOrderType;
      this.fetchParams = {
        partTypeNo: this.orderType,
        xhrAbort: false
      };
    },
    // 点击搜索条件搜索或者重置
    handleSearch(e) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        xhrAbort: false,
        partTypeNo: this.orderType,
        ...e
      });
    },
    // 选择配件
    handleTableRowSelect(e) {
      this.selectedRowDatas = e;
      // console.log('选中的行数据', this.selectedRowDatas);
    },
    // 点击确定按钮
    handleConfirm() {
      this.$emit('onConfirm', this.selectedRowDatas);
      this.$emit('close');
    },
    // 关闭弹窗
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
